Creating simple websites with Quarto + GitHub Pages

Introduction to Quarto for building websites

Kathleen Zeglinski  &  Danyang Dai

What is Quarto?

Quarto is an open-source scientific and technical publishing system built to help create high-quality reproducible documents, presentations, websites and more.


Does it sound somewhat familiar?


Yes! Quarto is the next generation of R Markdown.

Building website with Quarto

Today, we are going to focus on building website using Quarto. For more detailed information, see https://quarto.org/docs/websites/.

Why Quarto

Before Quarto time, blogdown1 and distill were used for building and publishing website.


Why Quarto

Coding is too hard, I want to use WordPress!

While WordPress is open-source and free, you will need to pay for hosting to publish your website.

Why Quarto

Actually…

Quarto Website is super easy!

More reasons for using Quarto:

Cool examples for some website made with Quarto


R-Ladies Melbourne


WEHI R Course


PhD Diary

You are just a few click away from having your own website!

To create a Quarto website, follow the instruction below:

Quarto basic for building website

Quarto basic for building website

YAML: Controls configuration, navigation, metadata

Quarto basic for building website

This part is the same for any qmd or rmd file. Markdown is used for base syntax for content writing.

Quarto basic for building website

Within this R chunk, everything is the same with writing a R script.

What do all the different files do?

  • The index.qmd file is essential. When a qmd file is named as index, it will automatically be used as the home page.

  • The index.qmd file must be named exactly as it is index.qmd.

  • The index.qmd file must be placed in the root folder next to the _quarto.yml.

What do all the different files do?

  • The about.qmd is the the About page in your website.

What do all the different files do?

  • The _quarto.yml is the control center for our Quarto website.

  • The _quarto.yml uses YAML language and unifies all pages under one layout and configuration.

What do all the different files do?

  • The styles.css is a custom CSS file to help make your website pretty.

  • This is where you can get creative and customised your website.

What do all the different files do?

  • This _site folder will be automatically generated once you clicked the Render function.

  • ❌ DO NOT edit anything in the _site folder. But you can delete and re-render.

How do it all come together?

my-website/
├── _quarto.yml       ← 🔧 Configuration file
├── styles.css        ← 🎨 Custom styling (optional)
├── index.qmd         ← 🏠 Home page
├── about.qmd         ← 📄 Additional page
└── _site/            ← 🌐 Rendered website output (auto-generated)

The goal today is to make sure that everyone will have a working website published on Github Page to take home!

Some code for your terminal

  • To clone the Github Repo:
git clone https://github.com/yourusername/my-website.git
  • Push to Github:
git add .
git commit -m "Initial Quarto site"
git push origin main

Alternatively, you can use GitHub Desktop for Git management.

  • Publish website
quarto publish gh-pages

More about Quarto

Acknowledgment